<template>
  <div id="licharts" style="height: 30vh;"></div>
</template>
<script>
import * as echarts from "echarts";
require("echarts"); // echarts theme
export default {
  name: "roseEchart",
  data() {
    return {
      chart: null,
      options: {},
      barData: [],
      lineData: [],
      category: []
    };
  },
  props: {
    listData: {
      type: Array,
      default: () => []
    },
    id: {
      type: String,
      default: ""
    }
  },
  watch: {
    listData: {
      handler(val, newVal) {
        this.initOptions(val);
        this.initCharts();
      },
      deep: true,
      immediate: true
    }
  },
  created() {
    // this.getData();
    // this.inde();
  },
  mounted() {
    setTimeout(() => {
      this.initOptions(this.listData);
      this.initCharts();
    }, 1000);
  },
  methods: {
    // inde() {
    //   this.category = [];
    //   let dottedBase = +new Date();
    //   this.lineData = [];
    //   this.barData = [];
    //   for (let i = 0; i < 20; i++) {
    //     let date = new Date((dottedBase += 3600 * 24 * 1000));
    //     this.category.push(
    //       [date.getFullYear(), date.getMonth() + 1, date.getDate()].join("-")
    //     );
    //     let b = Math.random() * 200;
    //     let d = Math.random() * 200;
    //     this.barData.push(b);
    //     this.lineData.push(d);
    //   }
    // },
    initOptions() {
      this.options = {
        legend: {},
        tooltip: {},
        dataset: {
          source: [
            ["product", "行业类型", "纺织类", "服务类", "贸易类", "制造业"],
            ["流水", 43.3, 85.8, 93.7, 34, 34],
            ["高山", 83.1, 73.4, 55.1, 43, 54],
            ["苏奥", 86.4, 65.2, 82.5, 32, 43],
            ["平原", 72.4, 53.9, 39.1, 55, 76],
            ["鼓第", 72.4, 53.9, 39.1, 76, 66],
            ["东奥", 72.4, 53.9, 39.1, 34, 56]
          ]
        },
        xAxis: { type: "category" },
        yAxis: {},
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [
          { type: "bar" },
          { type: "bar" },
          { type: "bar" },
          { type: "bar" },
          { type: "bar" }
        ]
      };
    },
    initCharts() {
      this.chart = echarts.init(document.getElementById("licharts"));
      this.chart.setOption(this.options);
    }
  }
};
</script>
